import React, { Component } from 'react';
import './Container.scss'
import { allgood_list, goods_search } from '../../utils/api'
import { Skeleton,Toast  } from 'antd-mobile'
import  { withRouter } from 'react-router-dom'
import events from '../../utils/events'
class Container extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }
    componentDidMount() {
        // 接收 全部商品页 搜索框页的关键字 兄弟组件传值
        events.on('searchkey',(val)=>{
            if( val){
                console.log(val);
                goods_search({ searchkey:val }).then((res) => {
                    if(res.data.list.length == 0){
                        Toast.show({
                            icon: 'fail',
                            content: '没有该商品',
                          })
                          this.render()
                    }else{
                        this.setState({
                            list: res.data.list
                        })
                    }
                })
            }
        })
        // 判断传参id和关键字都为空，则直接发送固定id的请求
        if ( !this.props.id && !this.props.searchkey ) {
            allgood_list({ id: 282657 }).then((res) => {
                console.log(res);
                this.setState({
                    list: res.data.list
                })
            })
        } else {
            // 如果不为空， 调用发送请求的方法
            this.requests()
        }
    }
    // 发送请求的方法
    requests = (val) => {
        // 保存分类页点击传参商品id
        let id = this.props.id;
        // 保存搜索框传参的关键字
        let searchkey = this.props.searchkey
        // console.log(searchkey);
        // 判断传入的参数类型
        let zhansan = null
        if (typeof (id) === 'number') {
            allgood_list({ id }).then((res) => {
                console.log(res.data);
                if(res.data.code == 400){
                    Toast.show({
                        icon: 'fail',
                        content: '没有该商品',
                      })
                      zhansan = setTimeout(() => {
                        this.props.history.go(-1)
                      }, 1000);
                }else{
                    }
                    this.setState({
                        list: res.data.list
                    })
            })
        }
        else if (typeof (searchkey) === 'string') {
            goods_search({ searchkey }).then((res) => {
                if(res.data.list.length == 0){
                    Toast.show({
                        icon: 'fail',
                        content: '没有该商品',
                      })
                      zhansan = setTimeout(() => {
                        this.props.history.go(-1)
                      }, 1000);
                }else{
                    this.setState({
                        list: res.data.list
                    })
                }
            })
        }
    }
    componentWillUnmount(){
        clearTimeout(this.zhansan)
    }
    goDetai(id){
        this.props.history.push({pathname:"/detai",state:{id}})
    }
    render() {
        return (
            <div className='container1'>
                {
                    this.state.list && this.state.list.length == 0 ?
                        <div className='skeleton'>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={10} animated />
                        </div> :
                        <div className='contentss1'>
                            {
                                this.state.list && this.state.list.map((item, index) => {
                                    return (
                                        <div key={index} className="card"  onClick={()=>{this.goDetai(item.id)}}>
                                            <div className='imgBox'>
                                                <img src={item.pic} alt="" />
                                            </div>
                                            <p>{item.name}</p>
                                            <span>原价 ￥{parseInt(item.salesPrice.value)}</span>
                                            <div className='price'>活动价￥ <span>{parseInt(item.salesPrice.value)}</span></div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                }
            </div>
        );
    }
}
export default withRouter(Container);